<template>
  <div class="manbox">
    <el-dialog :visible.sync="dialogComp.show" height="300px" width="60%" class="dialog">
      <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
    </el-dialog>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import apigoodsSearchLog from "@/api/logManage/goodsSearchLog";
export default {
  name: "rankingTopTen",

  data() {
    return {
      type: 2,
      xlist: [],
      ylist: [],

      dialogComp: {
        show: false
      }
    };
  },
  methods: {
    open() {
      this.dialogComp.show = true;
      setTimeout(() => {
      this.getData();
      },20)
},
    getData() {
      this.xlist = [];
      this.ylist = [];
      apigoodsSearchLog.goodsSearchStatistics(this.type).then(res => {
        res.data.list.forEach(item => {
          this.xlist.push(item.cityName);
          this.ylist.push(item.searchNum);
        });
        this.drawLine(this.xlist, this.ylist);
      });
    },
    drawLine(xList, yList) {
      let myChart = echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        title: { text: "商品搜索排行前十" },
        tooltip: {},
        xAxis: {
          data: xList
        },
        yAxis: {},
        grid: {
          bottom:'15%'
        },
        series: [
          {
            name: "商品搜索次数",
            type: "bar",
            data: yList
          }
        ]
      });
    }
  }
};
</script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
<style scoped>
.manbox /deep/ .el-dialog {
  margin-top: 0vh !important;
}

.dialog {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

